const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'build.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolveLoader: {
    modules: ['node__modules', path.resolve(__dirname, 'loader')],
    // 别名
    // alias: {
    //   loader1: path.resolve(__dirname, 'loader/loader1.js')
    // }
  },
  devtool: 'source-map',
  watch: true,
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader','css-loader','less-loader']
      },
      {
        test: /\.jpg$/,
        // 目的就是根据图片生成一个md5 发射到dist目录下，file-loader还会返回当前的图片路径
        // use: 'file-loader'
        // url-loader 会处理路径 
        use: {
          loader: 'url-loader',
          options: {
            limit: 2 * 1024
          }
        }
      },
      {
        test: /\.js$/,
        use: { /**mjx */
          loader: 'banner-loader',
          options: {
            text: 'text注释',
            filename: path.resolve(__dirname, 'banner.js')
          }
        },
      },
    ],
    // loader的分类 pre 在前面的  post在后面  normal
    // loader顺序 pre + normal + inline + post
    // rules: [ // loader顺序问题 从右到左 从下到上
    //   {
    //     test: /\.js$/,
    //     use: {
    //       loader: 'loader1'
    //     },
    //     enforce: 'pre'
    //   },
    //   {
    //     test: /\.js$/,
    //     use: {
    //       loader: 'loader2'
    //     }
    //   },
    //   {
    //     test: /\.js$/,
    //     use: {
    //       loader: 'loader3'
    //     },
    //     enforce: 'post'
    //   },
    //   // {
    //   //   test: /\.js$/,
    //   //   use: ['loader3', 'loader2', 'loader1']
    //   // }
    // ]
  },
}
